<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hamburger</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;700&family=Great+Vibes&family=Pacifico&family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
    />
    <style>
      #check:checked ~ #sidebar_menu {
        left: 0px;
        transition-duration: 500ms;
      }
    </style>
  </head>
  <body class="m-0 p-0 bg-black">
    <!-- this is the checkbox that is responsible for the opening and closing of the hamburger sidebar navbar -->
    <input type="checkbox" id="check" class="hidden" />

    <!-- this is the lable with the icon of the hamburger menu that controls the checkbox -->
    <label for="check" class="md:hidden">
      <i
        class="ri-menu-2-line text-white font-bold text-3xl absolute top-2 left-2 z-50 hover:bg-white hover:text-black px-2 py-1 rounded-xl"
      ></i>
    </label>

    <!-- this is the code for the sidebar -->
    <div
      id="sidebar_menu"
      class="md:hidden w-[300px] h-screen bg-white/30 rounded-tr-3xl rounded-br-3xl border-2 border-white z-40 absolute -left-[300px] duration-500 flex-col"
    >
      <div class="flex justify-center pt-10 mb-16">
        <span
          style="font-family: 'Dancing Script', cursive"
          class="text-white text-5xl pt-10"
          >Website</span
        >
      </div>

      <div class="w-full h-full flex-col">
        <div
          class="w-full h-[90px] hover:bg-white/30 flex justify-start space-x-5 items-center border px-3"
        >
          <span class="material-symbols-outlined text-white text-3xl"
            >home</span
          >
          <span style="font-family: 'Poppins'" class="text-white text-2xl"
            >Home</span
          >
        </div>
        <div
          class="w-full h-[90px] hover:bg-white/30 flex justify-start space-x-5 items-center border px-3"
        >
          <span class="material-symbols-outlined text-white text-3xl"
            >call</span
          >
          <span style="font-family: 'Poppins'" class="text-white text-2xl"
            >Call</span
          >
        </div>
        <div
          class="w-full h-[90px] hover:bg-white/30 flex justify-start space-x-5 items-center border px-3"
        >
          <span class="material-symbols-outlined text-white text-3xl"
            >gallery_thumbnail</span
          >
          <span style="font-family: 'Poppins'" class="text-white text-2xl"
            >Gallery</span
          >
        </div>
        <div
          class="w-full h-[90px] hover:bg-white/30 flex justify-start space-x-5 items-center border px-3"
        >
          <span class="material-symbols-outlined text-white text-3xl"
            >forum</span
          >
          <span style="font-family: 'Poppins'" class="text-white text-2xl"
            >Feedback</span
          >
        </div>
      </div>

      <div
        class="absolute bottom-0 w-full h-[90px] rounded-br-3xl flex justify-center items-center"
      >
        <ul class="flex space-x-5 text-4xl text-white">
          <li class="hover:scale-x-150 hover:scale-y-150 duration-500">
            <i class="ri-facebook-circle-fill"></i>
          </li>
          <li class="hover:scale-x-150 hover:scale-y-150 duration-500">
            <i class="ri-twitter-fill"></i>
          </li>
          <li class="hover:scale-x-150 hover:scale-y-150 duration-500">
            <i class="ri-instagram-fill"></i>
          </li>
          <li class="hover:scale-x-150 hover:scale-y-150 duration-500">
            <i class="ri-linkedin-box-fill"></i>
          </li>
        </ul>
      </div>
    </div>

    <nav class="hidden md:contents w-full h-16">
      <div class="w-full h-16 flex justify-between p-2.5">
        <div class="px-2">
          <span style="font-family: 'Dancing Script', cursive" class="text-white text-5xl pt-10">Website</span>
        </div>
  
        <div class="p-1.5">
          <ul class="text-white flex space-x-5 text-xl font-semibold">
            <li class="px-2 py-1 rounded duration-500 hover:duration-500 hover:bg-white hover:text-black"><a href="">Home</a></li>
            <li class="px-2 py-1 rounded duration-500 hover:duration-500 hover:bg-white hover:text-black"><a href="">Call</a></li>
            <li class="px-2 py-1 rounded duration-500 hover:duration-500 hover:bg-white hover:text-black"><a href="">Gallery</a></li>
            <li class="px-2 py-1 rounded duration-500 hover:duration-500 hover:bg-white hover:text-black"><a href="">Feedback</a></li>
          </ul>
        </div>
      </div>
    </nav>

  </body>
</html>
